<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="投票" />
    <title>投票</title>
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../common/css/modal-px.css" media="screen" title="no_title" charset="utf-8">
    <link rel="stylesheet" href="../common/css/plugins.css" charset="utf-8">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/vote.css">
</head>
<body>
<div id="main" style="display: none;">
    <img class='vote-banner' alt="">
    <main>
        <div class="deadline-bar">
            <span id="tips">距离投票截止时间还有<b id="day">0</b>天<b id="hour">0</b>小时</span>
            <a class='more-btn'>活动规则
                <div class="rules-content"></div>
            </a>
        </div>
        <div class='content' id="item-list"></div>
    </main>
</div>
<div id="detail">
    <main id="item-detail"></main>
</div>
<script type="text/template" id="detail-template">
    <div class='head'>
        <div class='head-info'>
            <span>{{item.name}}</span>
            <span number="{{votes}}">{{votes}}票</span>
        </div>
        <div class="resource">
            {{if item.type==1}}
            <img class='detail-banner' src="{{item.cover}}" alt="">
            {{/if}}
            {{if item.type==2 && item.src}}
            <img class='detail-banner' src="{{item.cover}}" alt="">
            <audio controls="" src="{{item.src}}">您的浏览器不能使用最新的视频播放方式呢</audio>
            {{/if}}
            {{if item.type==3 && item.src}}
            <video poster="{{item.cover}}" src="{{item.src}}" controls="controls">您的浏览器不支持 video 标签。</video>
            {{/if}}
        </div>
    </div>
    <div class='brief'>
        {{#item.content}}
    </div>
    <footer>
        <div class='vote-btn' id="vote" item_id="{{item.id}}">给TA投票</div>
        <div class='vote-btn' id="return">活动首页</div>
    </footer>
</script>
<script type="text/template" id="item-template">
    {{each details.items as item i}}
    <div class="vote-item" item-id="{{item.id}}">
        <div class='number'>{{i+1}}</div>
        <div class='avatar'>
            <img src="{{item.cover}}" alt="">
        </div>
        <div class='vote-brief'>
            <div class='vote-name'>{{item.name}}</div>
            <div class='bar-box'>
                <div class='vote-ticket'><strong>{{if votes[item.id] > 0 }}{{votes[item.id]}}{{else}}0{{/if}}</strong>&nbsp;票</div>
                <button data-id="{{item.id}}"><i class="iconfont icon-like"></i>投TA一票</button>
            </div>
        </div>
    </div>
    {{/each}}
</script>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 针对uc横竖屏rem html没有重绘的问题
                var style;
                if (style = document.getElementById("forhtml")) {
                    style.parentNode.removeChild(style);
                }
                style = document.createElement("style");
                style.id = "forhtml";
                document.head.appendChild(style);
                style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
            };
        recalc();
        document.body.style.visibility = 'visible';
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener('touchstart', function () {
            }, false);
        }
    })(document, window);
</script>
<script type="text/javascript" charset="utf-8" src="../common/lib/zepto.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/lib/zepto-adapter.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/lib/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/modal.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/utils.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/GeoUtils.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="../common/js/weixinshare.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var isWechat = false, isAPP = false, isFollow = false, isCode = false, isPart = false, activities = {};
        var rank_list = {},lockFlag=false;
        judgeSignPass(function(){});

        function initVariable(data){
            //===========================
            activities = data.data.details;
            isWechat = (window.parameter['ways'] == 'wechat');//是否开启微信
            isAPP = (activities.publishing.app['is_open'] == 'on');//是否开启APP
            isFollow = (window.parameter['following'] != 1);//是否关注
            isCode = Boolean(activities.publishing.wechat.qr_code[0]);//是否上传二维码
            if (isWechat) {
                if (isFollow) {
                    isPart = true;
                } else {
                    if (isCode) {
                        var qrCode = QRCode(activities.publishing.wechat.qr_code[0]).open();
                    } else {
                        isPart = true;
                    }
                }
            } else {
                //APP
            }
            if (typeof wxshare != 'undefined' && (activities.shares.isopen == 'on' || activities.shares.isopen == '1')) {
                var shareLink = '';
                if (isWechat) {
                    shareLink = window.location.origin + '/wechat/shares?id=' + window.parameter.act_id;
                } else {
                    shareLink = window.location.origin + location.pathname + '?act_id=' + wxshare.getUrlParam('act_id');
                }
                wxshare.share({
                    title: activities.shares.title,
                    desc: activities.shares.content,
                    link: shareLink,
                    imgUrl: activities.shares.thumb,
                });
            }
            //===========================
        }
        function actInfoCallBack() {
            $.ajax({
                url: '/lua/api/vote/details',
                data: {
                    vote_id: window.parameter.act_id
                },
                type: 'get',
                success: function (data) {
                    if (data.code == 200) {
                        $('#main').show();
                        $('title').text(data.data.details.title);
                        $('.rules-content').html(data.data.details.rules);
                        //rankList();
                        $('#item-list').html(template('item-template', data.data));
                        bindEvent();
                        var end_time = data.data.details.end_time.substring(0,19).replace(/-/g,'/');
                        countDown(end_time);
                        setInterval(function(){
                            countDown(end_time);
                        },60000);
                        if (data.data.details.background_img) {
                            $('.vote-banner').attr('src', data.data.details.background_img);
                        }
                        initVariable(data);
                    } else {
                        $.alert(data.message);
                    }
                }
            })
        }
        actInfoCallBack();
        function rankList() {
            $.ajax({
                url: '/lua/api/vote/rank',
//                url: '/lua/api/poll/items',
                data: {
                    vote_id: window.parameter.act_id,
                    act_id: window.parameter.act_id
                },
                type: 'get',
                success: function (data) {
                    if(data.code==200){
                        rank_list = data;
                        $('#item-list').html(template('item-template', data));
                        bindEvent();
                    }else{
                        $.alert(data.message);
                    }
                }
            })
        }
        function bindEvent(){
            $('.vote-brief .bar-box button').off('click').on('click',function(e){
                e.preventDefault();
                e.stopPropagation();
                voteItem($(this).data('id'));
            });
            $('.vote-item').off('click').on('click',function(e){
                e.preventDefault();
                e.stopPropagation();
                itemInfo($(this).attr('item-id'));
            });
        }
        function voteItem(item_id){
            if(!isPart){
                if(isSignPass == -2){
                    if (activities.publishing.app.app_urls[0]) {
                        $.confirm('请下载APP参与活动?',
                            function () {
                                location.href = activities.publishing.app.app_urls[0];
                            },
                            function () {
                            }
                        );
                    } else {
                        $.alert('请下载APP参与活动');
                    }
                    return;
                }
                if(isSignPass == -1) {
                    window.location.href = window.location.href + '&noLogin=true';
                    return;
                }
                if(isSignPass == 0){
                    $.alert('非法请求，请在App中打开');
                    return;
                }
            }
            if(lockFlag) return;
            lockFlag = !lockFlag;
            var postData = {
                'vote_id': window.parameter.act_id,
                'item_id': item_id,
                'uid': window.parameter.uid,
                'vote_token': vote_token
            };
            postData = $.extend({},window.parameter,postData);
            $.ajax({
                url: '/lua/api/vote/vote',
                data: postData,
                type: 'get',
                success: function (data) {
                    if (data.code == 200) {
//                        itemInfo(item_id);
                        $.toast('投票成功');
                        //rankList();
                        actInfoCallBack();
                        var $span = $('.head-info span:last-child');
                        var number = parseInt($span.attr('number'))+1;
                        $span.attr('number',number);
                        $span.text(number+'票');
                    } else {
                        $.alert(data.message);
                    }
                    lockFlag = !lockFlag;
                    judgeSignPass(function(){});
                }
            });
        }
//        ========================= detail
        function itemInfo(item_id){
            $.ajax({
                url: '/lua/api/vote/item',
                data: {
                    'vote_id': window.parameter.act_id,
                    'id': item_id
                },
                type: 'get',
                success: function (data) {
                    if(data.code==200){
                        $('#item-detail').html(template('detail-template', data.data));
                        $('#main').hide();
                        $('#detail').show();
                        bindEvents0();
                    }else{
                        $.alert(data.message);
                    }
                }
            });
        }
        function bindEvents0(){
            $('#vote').off('click').on('click',function(e){
                e.preventDefault();
                e.stopPropagation();
                voteItem($(this).attr('item_id'));
            });
            $('#return').off('click').on('click',function(e){
                e.preventDefault();
                e.stopPropagation();
                $('#main').show();
                $('#detail').hide();
            });
        }
        //倒计时
        function countDown(endTime){
            var diff = (new Date(endTime).getTime())- (new Date().getTime());
            if(diff>0){
                $('#day').text(parseInt(diff / 1000 / 60 / 60 / 24 , 10));
                $('#hour').text(parseInt(diff / 1000 / 60 / 60 % 24 , 10));
            }else{
                $('#tips').text('此次活动已结束哦~~~');
            }
        }
        $('a.more-btn').click(function(e){
            e.preventDefault();
            e.stopPropagation();
            $('.rules-content').toggleClass('show');
        });
        $('.rules-content').click(function(e){
            e.preventDefault();
            e.stopPropagation();
        });
    });
</script>
</body>
</html>